<script setup lang="ts">
import IntelliGence from '@/components/home/IntelliGence.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Computer from '../../components/home/Computer.vue'
const active = ref(0)
const router = useRouter()
const goSearch = () => {
    router.push('search')
}

</script>
<template>
    <div class="recommed">
        <div class="top">
            <div class="top_search">
                <div class="logo">
                    <img src="@/assets/logo.png" alt="">
                </div>
                <div class="search_box" @click="goSearch">
                    <van-search placeholder="请输入搜索关键词" />
                </div>
                <div class="user_icon">
                    <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="2rem" />
                </div>
            </div>
        </div>

        <div class="tab">
            <van-tabs v-model:active="active" animated background="#f2f2f2" title-active-color="#ed5b00" color="#ed5b00"
                title-inactive-color="#747474">
                <van-tab title="推荐 ">
                    <div class="recommedCt">
                        <RecommedView></RecommedView>
                    </div>
                </van-tab>
                <van-tab title="智能 ">
                    <IntelliGence></IntelliGence>
                </van-tab>
                <van-tab title="模型">
                    <MiPhone></MiPhone>
                </van-tab>
                <van-tab title="大转盘 ">
                    <PieView></PieView>
                </van-tab>
                <van-tab title="小精灵 ">
                    <Computer/>
                </van-tab>
            </van-tabs>
        </div>
        <el-backtop :right="30" :bottom="100" />

    </div>
</template>

<style scoped>
.top {
    position: fixed;
    width: 100vw;
    height: 56px;
    top: 0;
    left: 0;
    background-color: #f2f2f2;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px 1px rgba(17, 27, 37, 0.1);
    z-index: 33;

}

.top_search {
    display: flex;

    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 28px;
    height: 28px;
    background-color: #f2f2f2;


}

.logo img {
    width: 100%;
}

.search_box {
    min-width: 282px;
    padding: 8px 0;
    background-color: #f2f2f2;
}

.search_box .van-search {
    padding: 0;
}

.recommed {
    width: 100vw;
    background-color: #f5f5f5;
}

.tab {
    width: 100%;
    position: absolute;
    top: 58px;

}
</style>